<template>
    <el-card class="page">

        <!-- 标题 -->
        <template #header>
            <div class="header">
                <span>用户总览</span>
            </div>
        </template>


        <!-- 搜索表单 inline:一行显示 -->
        <el-form inline>
            <!-- 文章分类 -->
            <el-form-item label="用户检索：">
                <!-- 文章分类的下拉框 -->
                <el-input  placeholder="请输入用户名或手机号" style="width: 200px;" v-model="queryInput"></el-input>
            </el-form-item>

            <!-- 搜索按钮 -->
            <el-form-item>
                <el-button type="primary" @click="getUsers">搜索</el-button>
                <el-button  @click="queryInput = ''">重置</el-button>
            </el-form-item>
        </el-form>


        <!-- 文章列表 -->
        <!-- 使用el-table 组件来展示文章列表。利用ele渲染表格，不需要直接使用 v-for 指令来遍历数据 -->
        <!-- prop 属性指定了数据对象中对应的字段，el-table就知道如何从 articles 中提取和显示数据。 -->
        <el-table style="width: 100%;" :data="users" stripe >
            <el-table-column label="用户编号"  prop="id"></el-table-column>
            <el-table-column label="用户名"  prop="name"></el-table-column>
            <el-table-column label="联系方式"  prop="phone"></el-table-column>
            <el-table-column label="注册日期"  prop="time"></el-table-column>

            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>

        <!-- 分页条 -->
        <!-- v-model:current-page="pageNum":绑定当前页 -->
        <!-- v-model:page-size="pageSize"  :绑定没页条数  -->
        <!-- :page-sizes="[3, 5, 10, 15]" :可以选择每页显示 3、5、10 或 15 条记录-->
        <!-- layout是分页配置项： -->
        <!-- jumper：显示跳页输入框，允许用户输入页码并直接跳转到指定页。
              total：显示总记录数。
              sizes：显示每页记录数的选择框，让用户选择每页显示的条目数。
              pager：显示页码按钮，允许用户点击不同页码进行翻页。
              next：显示“下一页”按钮，允许用户跳转到下一页。 -->
        <!--  @current-change：事件监听器，表示当当前页码发生变化时触发的事件-->
        <!--  @size-change ：事件监听器，表示当每页条目数（即每页显示的记录数）发生变化时触发的事件。 -->
        <!-- :total="total" :绑定总条数 -->
		<!-- background:是否给按钮添加背景颜色 默认是false -->
        <el-pagination 
            v-model:current-page="pageNum" 
            v-model:page-size="pageSize" 
            :page-sizes="[3, 5, 10, 15]"
            layout="jumper, total, sizes, pager, next" 
            @current-change="onCurrentChange" 
            @size-change="onSizeChange"
            :total="total" 
            background
            style="margin-top: 20px;justify-content: flex-end;" />
    </el-card>
</template>

<script setup>
import { ref } from 'vue';
import managerApi from '@/api/manager';

//检索数据
const queryInput = ref('');



//模拟文章数据模型
const users = ref([
    { id: 1, name: '测试测试', phone: '15144132212', time: '2024-12-02 10:08:40'},
    { id: 2, name: '你好', phone: '15111111111', time: '2024-12-02 10:08:40'},
    { id: 3, name: '我好', phone: '15144444444', time: '2024-12-02 10:08:40'},
]);

//分页数据模型
const pageNum = ref(1); //当前页
const pageSize = ref(5);//每页条数
const total = ref(10)   //总条数

//每页条数发生变化，自动调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getUsers()
}

//页码发生变化，自动调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    getUsers()
}

//查询所有用户信息
const getUsers = async () => {
    //传递参数
    let data = {
        pageNum:pageNum.value,
        pageSize:pageSize.value,
        queryInput:queryInput.value ? queryInput.value : null,

    }
    const res = await managerApi.managerAllUser(data)
    if (res.data.code == 0) {
        //条数
        total.value = res.data.data.total
        //数据
        users.value = res.data.data.records
    }
}
//自调用
getUsers();


</script>


<style scoped>
.page {
    min-height: 100%;
    box-sizing: border-box;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>